<template>
  <AdminLayout @showCategoryModal="showCategoryModal = true">
    <div class="categories-container">
      <!-- 页面标题和操作区域 -->
      <div class="header">
        <div class="header-left">
          <h1 class="page-title">分类管理</h1>
          <p class="page-desc">管理音乐分类，设置分类样式和排序</p>
        </div>
        <div class="header-right">
          <button class="btn btn-primary" @click="openAddModal">
            <span class="icon">+</span>
            新增分类
          </button>
        </div>
      </div>

      <!-- 筛选和搜索区域 -->
      <div class="filter-section">
        <div class="filter-left">
          <select v-model="filters.status" @change="loadCategories" class="filter-select">
            <option value="">全部状态</option>
            <option value="1">启用</option>
            <option value="0">禁用</option>
          </select>
          <select v-model="pageSize" @change="loadCategories" class="filter-select">
            <option value="10">每页 10 条</option>
            <option value="20">每页 20 条</option>
            <option value="50">每页 50 条</option>
          </select>
          
          <!-- 批量操作区域 - 移动到筛选器内 -->
          <div class="batch-actions-inline" v-show="selectedCategories.length > 0">
            <span class="batch-info">已选择 {{ selectedCategories.length }} 个分类</span>
            <div class="batch-buttons">
              <button @click="batchEnable" class="btn btn-success btn-sm">
                批量启用
              </button>
              <button @click="batchDisable" class="btn btn-warning btn-sm">
                批量禁用
              </button>
              <button @click="confirmBatchDelete" class="btn btn-danger btn-sm">
                批量删除
              </button>
            </div>
          </div>
        </div>
        <div class="filter-right">
          <div class="search-box">
            <input 
              type="text" 
              v-model="searchKeyword" 
              placeholder="搜索分类名称..."
              @keyup.enter="loadCategories"
              class="search-input"
            >
            <button @click="loadCategories" class="search-btn">
              <span class="icon">🔍</span>
            </button>
          </div>
        </div>
      </div>

      <!-- 分类列表 -->
      <div class="categories-table-container">
        <div class="table-wrapper">
          <table class="categories-table">
            <thead>
              <tr>
                <th class="checkbox-col">
                  <input 
                    type="checkbox" 
                    v-model="selectAll" 
                    @change="toggleSelectAll"
                    class="table-checkbox"
                  >
                </th>
                <th>预览</th>
                <th>分类名称</th>
                <th>描述</th>
                <th>图标</th>
                <th>排序</th>
                <th>状态</th>
                <th>创建时间</th>
                <th class="actions-col">操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="category in categories" :key="category.categoryId" class="table-row">
                <td class="checkbox-col">
                  <input 
                    type="checkbox" 
                    v-model="selectedCategories" 
                    :value="category.categoryId"
                    class="table-checkbox"
                  >
                </td>
                <td class="preview-col">
                  <div 
                    class="category-preview" 
                    :style="{ background: category.gradient || category.color }"
                  >
                    <span class="category-icon">{{ category.icon }}</span>
                  </div>
                </td>
                <td class="name-col">
                  <div class="category-name">{{ category.name }}</div>
                </td>
                <td class="desc-col">
                  <div class="category-desc">{{ category.description || '暂无描述' }}</div>
                </td>
                <td class="icon-col">
                  <span class="icon-display">{{ category.icon }}</span>
                </td>
                <td class="sort-col">
                  <input 
                    type="number" 
                    v-model.number="category.sortOrder" 
                    @blur="updateSortOrder(category)"
                    class="sort-input"
                    min="0"
                  >
                </td>
                <td class="status-col">
                  <span 
                    :class="['status-badge', category.status === 1 ? 'status-enabled' : 'status-disabled']"
                  >
                    {{ category.status === 1 ? '启用' : '禁用' }}
                  </span>
                </td>
                <td class="time-col">
                  <div class="created-time">{{ formatDate(category.createdTime) }}</div>
                </td>
                <td class="actions-col">
                  <div class="action-buttons">
                    <button @click="editCategory(category)" class="btn-action btn-edit" title="编辑">
                      ✏️
                    </button>
                    <button @click="toggleStatus(category)" class="btn-action btn-toggle" :title="category.status === 1 ? '禁用' : '启用'">
                      {{ category.status === 1 ? '🔒' : '🔓' }}
                    </button>
                    <button @click="confirmDelete(category)" class="btn-action btn-delete" title="删除">
                      🗑️
                    </button>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <!-- 空状态 -->
      <div v-if="categories.length === 0 && !loading" class="empty-state">
        <div class="empty-icon">📂</div>
        <h3>暂无分类</h3>
        <p>还没有创建任何分类，点击"新增分类"开始添加</p>
        <button class="btn btn-primary" @click="openAddModal">新增分类</button>
      </div>

      <!-- 分页器 -->
      <div class="pagination" v-if="totalPages > 1">
        <button 
          @click="changePage(currentPage - 1)" 
          :disabled="currentPage === 0"
          class="page-btn"
        >
          上一页
        </button>
        <div class="page-numbers">
          <button 
            v-for="page in visiblePages" 
            :key="page"
            @click="changePage(page - 1)"
            :class="['page-number', { active: page - 1 === currentPage }]"
          >
            {{ page }}
          </button>
        </div>
        <button 
          @click="changePage(currentPage + 1)" 
          :disabled="currentPage === totalPages - 1"
          class="page-btn"
        >
          下一页
        </button>
        <div class="page-info">
          第 {{ currentPage + 1 }} 页，共 {{ totalPages }} 页，共 {{ totalElements }} 条
        </div>
      </div>

      <!-- 分类编辑模态框 -->
      <div v-if="showCategoryModal" class="modal-overlay" @click="closeCategoryModal">
        <div class="modal-content" @click.stop>
          <div class="modal-header">
            <h3>{{ isEdit ? '编辑分类' : '新增分类' }}</h3>
            <button @click="closeCategoryModal" class="modal-close">×</button>
          </div>
          <div class="modal-body">
            <form @submit.prevent="saveCategory" class="category-form">
              <div class="form-layout">
                <!-- 第一列：基本信息 -->
                <div class="form-section">
                  <div class="section-header">
                    <h4>基本信息</h4>
                    <span class="section-desc">设置分类的基础属性</span>
                  </div>
                  
                  <div class="form-group">
                    <label class="form-label">分类名称 *</label>
                    <input 
                      type="text" 
                      v-model="categoryForm.name" 
                      required 
                      class="form-input"
                      placeholder="请输入分类名称"
                    >
                  </div>
                  
                  <div class="form-group">
                    <label class="form-label">描述</label>
                    <textarea 
                      v-model="categoryForm.description" 
                      class="form-textarea"
                      placeholder="请输入分类描述（可选）"
                      rows="4"
                    ></textarea>
                  </div>
                  
                  <div class="form-group">
                    <label class="form-label">排序序号</label>
                    <input 
                      type="number" 
                      v-model.number="categoryForm.sortOrder" 
                      class="form-input"
                      placeholder="数字越小排序越靠前"
                      min="0"
                    >
                  </div>
                  
                  <div class="form-group">
                    <label class="form-label">状态</label>
                    <div class="radio-group">
                      <label class="radio-item">
                        <input type="radio" v-model="categoryForm.status" :value="1">
                        <span class="radio-text">启用</span>
                      </label>
                      <label class="radio-item">
                        <input type="radio" v-model="categoryForm.status" :value="0">
                        <span class="radio-text">禁用</span>
                      </label>
                    </div>
                  </div>
                </div>
                
                <!-- 第二列：图标设置 -->
                <div class="form-section">
                  <div class="section-header">
                    <h4>图标设置</h4>
                    <span class="section-desc">选择分类的图标</span>
                  </div>
                  
                  <div class="form-group">
                    <label class="form-label">图标设置 *</label>
                    <div class="icon-management">
                      <!-- 当前图标显示和自定义输入 -->
                      <div class="current-icon-section">
                        <div class="current-icon-display">
                          <div class="current-icon">{{ categoryForm.icon }}</div>
                          <div class="icon-info">
                            <div class="icon-details">
                            </div>
                            
                            <!-- 自定义图标输入 -->
                            <div class="custom-icon-input">
                              <div class="input-group">
                                <input 
                                  type="text" 
                                  v-model="customIcon" 
                                  class="form-input custom-input"
                                  placeholder="自定义图标"
                                  maxlength="10"
                                >
                                <button 
                                  type="button" 
                                  @click="useCustomIcon"
                                  :disabled="!customIcon.trim()"
                                  class="btn btn-custom"
                                >
                                  使用
                                </button>
                              </div>
                              <p class="custom-hint">💡 输入任何Emoji、文字或符号</p>
                            </div>
                          </div>
                        </div>
                      </div>
                      
                      <!-- 预设图标网格 -->
                      <div class="icon-grid-container">
                        <div class="grid-header">
                          <span class="grid-title">预设图标（{{ iconOptions.length }}个）</span>
                          <span class="grid-desc">点击选择</span>
                        </div>
                        <div class="icon-options">
                          <button 
                            v-for="icon in iconOptions" 
                            :key="icon"
                            type="button"
                            @click="categoryForm.icon = icon"
                            :class="['icon-option', { selected: categoryForm.icon === icon }]"
                            :title="icon"
                          >
                            {{ icon }}
                          </button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                
                <!-- 第三列：外观设置 -->
                <div class="form-section">
                  <div class="section-header">
                    <h4>外观设置</h4>
                    <span class="section-desc">定制分类的视觉样式</span>
                  </div>
                  
                  <div class="form-group">
                    <label class="form-label">主题色 *</label>
                    <div class="color-selector">
                      <input 
                        type="color" 
                        v-model="categoryForm.color" 
                        class="color-input"
                      >
                      <div class="color-display" :style="{ backgroundColor: categoryForm.color }">
                        {{ categoryForm.color }}
                      </div>
                    </div>
                  </div>
                  
                  <div class="form-group">
                    <label class="form-label">渐变背景</label>
                    <div class="gradient-selector">
                      <input 
                        type="text" 
                        v-model="categoryForm.gradient" 
                        class="form-input"
                        placeholder="如：linear-gradient(135deg, #1DB954, #1ed760)"
                      >
                    </div>
                  </div>
                  
                  <!-- 预览区域 -->
                  <div class="preview-section">
                    <label class="form-label">预览效果</label>
                    <div class="gradient-preview" :style="{ background: categoryForm.gradient || categoryForm.color }">
                      <span class="preview-icon">{{ categoryForm.icon }}</span>
                      <span class="preview-text">{{ categoryForm.name || '分类预览' }}</span>
                    </div>
                  </div>
                </div>
              </div>

              <div class="form-actions">
                <button type="button" @click="closeCategoryModal" class="btn btn-secondary">
                  取消
                </button>
                <button type="submit" class="btn btn-primary" :disabled="saving">
                  {{ saving ? '保存中...' : '保存' }}
                </button>
              </div>
            </form>
          </div>
        </div>
      </div>

      <!-- 加载状态 -->
      <div v-if="loading" class="loading-overlay">
        <div class="loading-spinner"></div>
        <p>加载中...</p>
      </div>
    </div>
  </AdminLayout>
</template>

<script>
import AdminLayout from '@/components/AdminLayout.vue'
import { categoryManagement } from '@/utils/adminApi'

export default {
  name: 'AdminCategoriesView',
  components: {
    AdminLayout
  },
  data() {
    return {
      categories: [],
      loading: false,
      saving: false,
      currentPage: 0,
      pageSize: 10,
      totalPages: 0,
      totalElements: 0,
      searchKeyword: '',
      filters: {
        status: ''
      },
      selectedCategories: [],
      selectAll: false,
      showCategoryModal: false,
      isEdit: false,
      categoryForm: {
        name: '',
        description: '',
        color: '#1DB954',
        gradient: '',
        icon: '🎵',
        sortOrder: 0,
        status: 1
      },
      iconOptions: [
        // 音乐相关
        '🎵', '🎶', '🎼', '🎤', '🎧', '🎸', '🎹', '🎺', '🎷', '🥁', '🎻', '🪕', 
        '📻', '🎙️', '🔊', '🎚️', '🎛️', '💿', '💽', '📀', '🎬', '🎭', '🎪', '🎨',
        
        // 自然和天气
        '🌟', '⭐', '✨', '💫', '🌙', '☀️', '🌈', '🌊', '🔥', '❄️', '⚡', '🌪️',
        '🌸', '🌺', '🌻', '🌹', '🌷', '🌿', '🍀', '🌲', '🌳', '🌴', '🌵', '🌾',
        
        // 动物
        '🦅', '🐺', '🦁', '🐯', '🐨', '🐼', '🦊', '🐱', '🐶', '🐸', '🦋', '🐝',
        '🐉', '🦄', '🐎', '🦌', '🐰', '🐹', '🐭', '🐮', '🐷', '🐔', '🐧', '🦆',
        
        // 食物和饮料
        '🍎', '🍊', '🍇', '🍓', '🥝', '🍍', '🥭', '🍑', '🍒', '🥥', '🍌', '🍋',
        '☕', '🍵', '🥤', '🍷', '🍺', '🥂', '🍸', '🍹', '🧃', '🥛', '🍼', '🍯',
        
        // 活动和运动
        '⚽', '🏀', '🏈', '⚾', '🎾', '🏐', '🏓', '🏸', '🥊', '🏊', '🏃', '🚴',
        '🎯', '🎲', '🎮', '🕹️', '🎰', '🎱', '🎳', '🎪', '🎢', '🎡', '🎠', '🎨',
        
        // 符号和形状
        '💎', '💰', '🔮', '⚔️', '🛡️', '🗡️', '🏹', '🔱', '⚓', '🔥', '💥', '✨',
        '🔶', '🔷', '🔸', '🔹', '💠', '🔺', '🔻', '💢', '💯', '🔥', '💨', '⭐',
        
        // 职业和工具
        '👑', '🎩', '🧢', '👒', '🎓', '⚒️', '🔧', '🔨', '⚙️', '🔩', '🗜️', '🔬',
        '💻', '⌨️', '🖥️', '📱', '📷', '📹', '🎥', '📡', '🛰️', '🚀', '✈️', '🚁',
        
        // 建筑和地点
        '🏠', '🏢', '🏰', '🗼', '🗽', '⛪', '🕌', '🏛️', '🏟️', '🎭', '🎪', '🎡',
        '🗻', '🏔️', '⛰️', '🌋', '🏝️', '🏖️', '🏜️', '🏞️', '🌅', '🌄', '🌇', '🌆',
        
        // 交通工具
        '🚗', '🚕', '🚙', '🚌', '🚐', '🚛', '🚚', '🚨', '🚓', '🚑', '🚒', '🚲',
        '🛵', '🏍️', '🛸', '🚁', '✈️', '🛩️', '🚀', '⛵', '🛥️', '🚤', '⛴️', '🚢',
        
        // 表情和手势
        '😀', '😃', '😄', '😁', '😊', '😎', '🤩', '😍', '🥰', '😘', '😋', '😜',
        '🤔', '🧐', '🤓', '😤', '😡', '🥺', '😢', '😭', '😱', '😨', '😰', '😅',
        
        // 其他符号
        '❤️', '💛', '💚', '💙', '💜', '🧡', '🖤', '🤍', '💖', '💝', '💗', '💓',
        '⚡', '🔥', '💥', '✨', '⭐', '🌟', '💫', '💢', '💯', '💪', '👍', '✌️'
      ],
      customIcon: '', // 自定义图标输入
    }
  },
  computed: {
    visiblePages() {
      const total = this.totalPages
      const current = this.currentPage + 1
      const delta = 2
      const range = []
      const start = Math.max(1, current - delta)
      const end = Math.min(total, current + delta)

      for (let i = start; i <= end; i++) {
        range.push(i)
      }
      return range
    }
  },
  mounted() {
    this.loadCategories()
  },
  methods: {
    async loadCategories() {
      this.loading = true
      try {
        const params = {
          page: this.currentPage,
          size: this.pageSize,
          sortBy: 'sortOrder'
        }
        
        if (this.filters.status !== '') {
          params.status = this.filters.status
        }
        
        if (this.searchKeyword.trim()) {
          params.keyword = this.searchKeyword.trim()
        }

        const response = await categoryManagement.getCategories(params)
        this.categories = response.categories
        this.totalElements = response.totalElements
        this.totalPages = response.totalPages
        this.currentPage = response.currentPage
        
        // 重置选择状态
        this.selectedCategories = []
        this.selectAll = false
      } catch (error) {
        console.error('加载分类列表失败:', error)
        this.$root.showToast('加载分类列表失败', 'error')
      } finally {
        this.loading = false
      }
    },

    changePage(page) {
      if (page >= 0 && page < this.totalPages) {
        this.currentPage = page
        this.loadCategories()
      }
    },

    toggleSelectAll() {
      if (this.selectAll) {
        this.selectedCategories = this.categories.map(c => c.categoryId)
      } else {
        this.selectedCategories = []
      }
    },

    openAddModal() {
      this.isEdit = false
      this.categoryForm = {
        name: '',
        description: '',
        color: '#1DB954',
        gradient: '',
        icon: '🎵',
        sortOrder: 0,
        status: 1
      }
      this.customIcon = ''
      this.showCategoryModal = true
    },

    editCategory(category) {
      this.isEdit = true
      this.categoryForm = {
        categoryId: category.categoryId,
        name: category.name,
        description: category.description || '',
        color: category.color,
        gradient: category.gradient || '',
        icon: category.icon,
        sortOrder: category.sortOrder,
        status: category.status
      }
      this.showCategoryModal = true
    },

    closeCategoryModal() {
      this.showCategoryModal = false
      this.isEdit = false
      this.categoryForm = {
        name: '',
        description: '',
        color: '#1DB954',
        gradient: '',
        icon: '🎵',
        sortOrder: 0,
        status: 1
      }
      this.customIcon = ''
    },

    // 使用自定义图标
    useCustomIcon() {
      if (this.customIcon.trim()) {
        this.categoryForm.icon = this.customIcon.trim()
        this.customIcon = ''
      }
    },

    // 清除自定义图标输入
    clearCustomIcon() {
      this.customIcon = ''
    },

    async saveCategory() {
      if (!this.categoryForm.name.trim()) {
        this.$root.showToast('请输入分类名称', 'error')
        return
      }

      this.saving = true
      try {
        // 自动生成渐变背景（如果没有设置）
        if (!this.categoryForm.gradient && this.categoryForm.color) {
          this.categoryForm.gradient = this.generateGradient(this.categoryForm.color)
        }

        if (this.isEdit) {
          await categoryManagement.updateCategory(this.categoryForm.categoryId, this.categoryForm)
          this.$root.showToast('分类更新成功', 'success')
        } else {
          await categoryManagement.createCategory(this.categoryForm)
          this.$root.showToast('分类创建成功', 'success')
        }
        
        this.closeCategoryModal()
        this.loadCategories()
      } catch (error) {
        console.error('保存分类失败:', error)
        this.$root.showToast(this.isEdit ? '更新分类失败' : '创建分类失败', 'error')
      } finally {
        this.saving = false
      }
    },

    generateGradient(color) {
      // 简单的渐变生成逻辑
      const lighterColor = this.lightenColor(color, 20)
      return `linear-gradient(135deg, ${color}, ${lighterColor})`
    },

    lightenColor(color, percent) {
      const num = parseInt(color.replace("#", ""), 16)
      const amt = Math.round(2.55 * percent)
      const R = (num >> 16) + amt
      const G = (num >> 8 & 0x00FF) + amt
      const B = (num & 0x0000FF) + amt
      return "#" + (0x1000000 + (R < 255 ? R < 1 ? 0 : R : 255) * 0x10000 +
        (G < 255 ? G < 1 ? 0 : G : 255) * 0x100 +
        (B < 255 ? B < 1 ? 0 : B : 255)).toString(16).slice(1)
    },

    async updateSortOrder(category) {
      try {
        await categoryManagement.updateCategory(category.categoryId, {
          name: category.name,
          description: category.description,
          color: category.color,
          gradient: category.gradient,
          icon: category.icon,
          sortOrder: category.sortOrder,
          status: category.status
        })
        this.$root.showToast('排序更新成功', 'success')
        this.loadCategories()
      } catch (error) {
        console.error('更新排序失败:', error)
        this.$root.showToast('更新排序失败', 'error')
      }
    },

    async toggleStatus(category) {
      try {
        const newStatus = category.status === 1 ? 0 : 1
        await categoryManagement.updateCategory(category.categoryId, {
          name: category.name,
          description: category.description,
          color: category.color,
          gradient: category.gradient,
          icon: category.icon,
          sortOrder: category.sortOrder,
          status: newStatus
        })
        this.$root.showToast(newStatus === 1 ? '分类已启用' : '分类已禁用', 'success')
        this.loadCategories()
      } catch (error) {
        console.error('更新状态失败:', error)
        this.$root.showToast('更新状态失败', 'error')
      }
    },

    confirmDelete(category) {
      if (confirm(`确定要删除分类"${category.name}"吗？`)) {
        this.deleteCategory(category.categoryId)
      }
    },

    async deleteCategory(categoryId) {
      try {
        await categoryManagement.deleteCategory(categoryId)
        this.$root.showToast('分类删除成功', 'success')
        this.loadCategories()
      } catch (error) {
        console.error('删除分类失败:', error)
        this.$root.showToast('删除分类失败', 'error')
      }
    },

    confirmBatchDelete() {
      if (this.selectedCategories.length === 0) {
        this.$root.showToast('请选择要删除的分类', 'error')
        return
      }
      
      if (confirm(`确定要删除选中的 ${this.selectedCategories.length} 个分类吗？`)) {
        this.batchDeleteCategories()
      }
    },

    async batchDeleteCategories() {
      try {
        await categoryManagement.batchDeleteCategories(this.selectedCategories)
        this.$root.showToast('批量删除成功', 'success')
        this.selectedCategories = []
        this.selectAll = false
        this.loadCategories()
      } catch (error) {
        console.error('批量删除失败:', error)
        this.$root.showToast('批量删除失败', 'error')
      }
    },

    async batchEnable() {
      if (this.selectedCategories.length === 0) {
        this.$root.showToast('请选择要启用的分类', 'error')
        return
      }
      
      try {
        await categoryManagement.batchUpdateCategoryStatus(this.selectedCategories, 1)
        this.$root.showToast('批量启用成功', 'success')
        this.selectedCategories = []
        this.selectAll = false
        this.loadCategories()
      } catch (error) {
        console.error('批量启用失败:', error)
        this.$root.showToast('批量启用失败', 'error')
      }
    },

    async batchDisable() {
      if (this.selectedCategories.length === 0) {
        this.$root.showToast('请选择要禁用的分类', 'error')
        return
      }
      
      try {
        await categoryManagement.batchUpdateCategoryStatus(this.selectedCategories, 0)
        this.$root.showToast('批量禁用成功', 'success')
        this.selectedCategories = []
        this.selectAll = false
        this.loadCategories()
      } catch (error) {
        console.error('批量禁用失败:', error)
        this.$root.showToast('批量禁用失败', 'error')
      }
    },

    formatDate(dateString) {
      if (!dateString) return '暂无'
      const date = new Date(dateString)
      return date.toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
      })
    }
  }
}
</script>

<style scoped>
.categories-container {
  padding: 24px;
  max-width: 1400px;
  margin: 0 auto;
}

/* 页面头部 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 32px;
}

.header-left {
  flex: 1;
}

.page-title {
  font-size: 2rem;
  font-weight: bold;
  color: white;
  margin: 0 0 8px 0;
}

.page-desc {
  color: #b3b3b3;
  margin: 0;
  font-size: 1rem;
}

.header-right {
  flex-shrink: 0;
}

/* 按钮样式 */
.btn {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-primary {
  background: #1DB954;
  color: white;
}

.btn-primary:hover {
  background: #1ed760;
  transform: translateY(-2px);
}

.btn-secondary {
  background: #282828;
  color: white;
  border: 1px solid #404040;
}

.btn-secondary:hover {
  background: #404040;
}

.btn-success {
  background: #28a745;
  color: white;
}

.btn-warning {
  background: #ffc107;
  color: #212529;
}

.btn-danger {
  background: #dc3545;
  color: white;
}

.btn-sm {
  padding: 8px 16px;
  font-size: 12px;
}

/* 筛选区域 */
.filter-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  gap: 16px;
}

.filter-left {
  display: flex;
  gap: 12px;
  align-items: center;
  flex: 1;
  flex-wrap: wrap;
}

.filter-select {
  padding: 8px 12px;
  background: #282828;
  border: 1px solid #404040;
  border-radius: 6px;
  color: white;
  font-size: 14px;
}

.search-box {
  display: flex;
  gap: 8px;
}

.search-input {
  width: 240px;
  padding: 8px 12px;
  background: #282828;
  border: 1px solid #404040;
  border-radius: 6px;
  color: white;
  font-size: 14px;
}

.search-btn {
  padding: 8px 12px;
  background: #1DB954;
  border: none;
  border-radius: 6px;
  color: white;
  cursor: pointer;
}

/* 批量操作 */
.batch-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #282828;
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  border: 1px solid #404040;
}

/* 内嵌批量操作样式 */
.batch-actions-inline {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 16px;
  padding-left: 16px;
  border-left: 1px solid #404040;
}

.batch-info {
  color: #b3b3b3;
  font-size: 14px;
  white-space: nowrap;
}

.batch-buttons {
  display: flex;
  gap: 6px;
}

.batch-actions-inline .batch-buttons .btn {
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 4px;
}

/* 表格样式 */
.categories-table-container {
  background: #181818;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #282828;
  margin-bottom: 24px;
}

.table-wrapper {
  overflow-x: auto;
}

.categories-table {
  width: 100%;
  border-collapse: collapse;
}

.categories-table th {
  background: #282828;
  color: #b3b3b3;
  padding: 16px 12px;
  text-align: left;
  font-weight: 500;
  font-size: 14px;
  border-bottom: 1px solid #404040;
}

.categories-table td {
  padding: 16px 12px;
  border-bottom: 1px solid #282828;
  vertical-align: middle;
}

.table-row:hover {
  background: #1a1a1a;
}

.checkbox-col {
  width: 50px;
  text-align: center;
}

.table-checkbox {
  width: 16px;
  height: 16px;
}

/* 预览列 */
.preview-col {
  width: 100px;
}

.category-preview {
  width: 80px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.category-icon {
  font-size: 18px;
}

/* 名称列 */
.name-col {
  min-width: 120px;
}

.category-name {
  color: white;
  font-weight: 500;
  font-size: 14px;
}

/* 描述列 */
.desc-col {
  min-width: 200px;
  max-width: 300px;
}

.category-desc {
  color: #b3b3b3;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 图标列 */
.icon-col {
  width: 60px;
  text-align: center;
}

.icon-display {
  font-size: 20px;
}

/* 排序列 */
.sort-col {
  width: 100px;
}

.sort-input {
  width: 60px;
  padding: 4px 8px;
  background: #282828;
  border: 1px solid #404040;
  border-radius: 4px;
  color: white;
  font-size: 13px;
  text-align: center;
}

/* 状态列 */
.status-col {
  width: 80px;
}

.status-badge {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.status-enabled {
  background: #28a745;
  color: white;
}

.status-disabled {
  background: #6c757d;
  color: white;
}

/* 时间列 */
.time-col {
  width: 140px;
}

.created-time {
  color: #b3b3b3;
  font-size: 13px;
}

/* 操作列 */
.actions-col {
  width: 120px;
}

.action-buttons {
  display: flex;
  gap: 4px;
}

.btn-action {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
}

.btn-edit {
  background: #17a2b8;
}

.btn-toggle {
  background: #1DB954;
}

.btn-delete {
  background: #dc3545;
}

.btn-action:hover {
  transform: scale(1.1);
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 80px 20px;
  color: #b3b3b3;
}

.empty-icon {
  font-size: 4rem;
  margin-bottom: 16px;
  opacity: 0.5;
}

.empty-state h3 {
  color: white;
  margin: 0 0 8px 0;
  font-size: 1.5rem;
}

.empty-state p {
  margin: 0 0 24px 0;
  font-size: 1rem;
}

/* 分页器 */
.pagination {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.page-btn {
  padding: 8px 16px;
  background: #282828;
  border: 1px solid #404040;
  border-radius: 6px;
  color: white;
  cursor: pointer;
  transition: all 0.2s ease;
}

.page-btn:hover:not(:disabled) {
  background: #404040;
}

.page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.page-numbers {
  display: flex;
  gap: 4px;
}

.page-number {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #282828;
  border: 1px solid #404040;
  border-radius: 6px;
  color: white;
  cursor: pointer;
  transition: all 0.2s ease;
}

.page-number:hover {
  background: #404040;
}

.page-number.active {
  background: #1DB954;
  border-color: #1DB954;
}

.page-info {
  color: #b3b3b3;
  font-size: 14px;
}

/* 模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.modal-content {
  background: #181818;
  border-radius: 12px;
  width: 100%;
  max-width: 1200px;
  max-height: 90vh;
  overflow-y: auto;
  border: 1px solid #282828;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #282828;
}

.modal-header h3 {
  color: white;
  margin: 0;
  font-size: 1.25rem;
}

.modal-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: #b3b3b3;
  font-size: 24px;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.modal-close:hover {
  background: #282828;
  color: white;
}

.modal-body {
  padding: 24px;
}

/* 表单样式 */
.category-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.form-layout {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
}

.form-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.section-header {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid #1DB954;
}

.section-header h4 {
  margin: 0 0 6px 0;
  color: #1DB954;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-header h4::before {
  content: '';
  display: block;
  width: 3px;
  height: 18px;
  background: #1DB954;
  border-radius: 2px;
}

.section-desc {
  color: #b3b3b3;
  font-size: 13px;
  margin: 0;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.preview-section {
  margin-top: 8px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-label {
  color: white;
  font-weight: 500;
  font-size: 14px;
}

.form-input, .form-textarea {
  padding: 12px 16px;
  background: #282828;
  border: 1px solid #404040;
  border-radius: 8px;
  color: white;
  font-size: 14px;
  transition: border-color 0.2s ease;
}

.form-input:focus, .form-textarea:focus {
  outline: none;
  border-color: #1DB954;
}

.form-textarea {
  resize: vertical;
  min-height: 80px;
}

/* 图标选择器 */


/* 自定义图标输入 */
.custom-icon-input {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.input-group {
  display: flex;
  gap: 6px;
  align-items: center;
}

.custom-input {
  flex: 1;
  font-size: 14px;
  text-align: center;
  padding: 8px 12px;
  background: #1a1a1a;
  border: 1px solid #555;
}

.custom-input:focus {
  border-color: #1DB954;
  background: #222;
}

.btn-custom {
  background: linear-gradient(135deg, #ff6b6b, #ee5a52);
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  font-size: 12px;
}

.btn-custom:hover:not(:disabled) {
  background: linear-gradient(135deg, #ee5a52, #e74c3c);
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(255, 107, 107, 0.3);
}

.btn-custom:disabled {
  background: #555;
  cursor: not-allowed;
  transform: none;
}

.custom-hint {
  color: #888;
  font-size: 10px;
  margin: 0;
  text-align: center;
}

/* 图标网格容器 */
.icon-grid-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.grid-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: #282828;
  border-radius: 6px;
  border: 1px solid #404040;
}

.grid-title {
  color: #1DB954;
  font-weight: 600;
  font-size: 13px;
}

.grid-desc {
  color: #b3b3b3;
  font-size: 12px;
}

.icon-input {
  text-align: center;
  font-size: 18px;
}

/* 图标管理容器 */
.icon-management {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 当前图标区域 */
.current-icon-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: #282828;
  border-radius: 8px;
  border: 1px solid #404040;
}

.current-icon-display {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.current-icon {
  font-size: 28px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1DB954, #1ed760);
  border-radius: 10px;
  box-shadow: 0 3px 8px rgba(29, 185, 84, 0.3);
  flex-shrink: 0;
}

.icon-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.icon-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.icon-name {
  color: white;
  font-size: 14px;
  font-family: monospace;
  font-weight: 500;
}

.icon-label {
  color: #b3b3b3;
  font-size: 12px;
}

.icon-options {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  max-height: 280px;
  overflow-y: auto;
  padding: 12px;
  background: #1a1a1a;
  border-radius: 8px;
  border: 1px solid #404040;
  scrollbar-width: thin;
  scrollbar-color: #404040 #1a1a1a;
}

.icon-options::-webkit-scrollbar {
  width: 6px;
}

.icon-options::-webkit-scrollbar-track {
  background: #1a1a1a;
}

.icon-options::-webkit-scrollbar-thumb {
  background: #404040;
  border-radius: 3px;
}

.icon-options::-webkit-scrollbar-thumb:hover {
  background: #666;
}

.icon-option {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #282828;
  border: 2px solid #404040;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 18px;
  position: relative;
}

.icon-option:hover {
  background: #404040;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  border-color: #666;
}

.icon-option.selected {
  background: linear-gradient(135deg, #1DB954, #1ed760);
  border-color: #1DB954;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(29, 185, 84, 0.4);
}

.icon-option.selected::after {
  content: '✓';
  position: absolute;
  top: -4px;
  right: -4px;
  background: #fff;
  color: #1DB954;
  font-size: 10px;
  font-weight: bold;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* 颜色选择器 */
.color-selector {
  display: flex;
  align-items: center;
  gap: 12px;
}

.color-input {
  width: 50px;
  height: 40px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.color-display {
  flex: 1;
  height: 40px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 500;
  font-size: 12px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* 渐变选择器 */
.gradient-selector {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gradient-preview {
  height: 100px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  border: 2px solid rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}

.gradient-preview::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(255,255,255,0.1) 0%, transparent 50%, rgba(255,255,255,0.1) 100%);
  pointer-events: none;
}

.preview-icon {
  font-size: 24px;
  margin-bottom: 4px;
  z-index: 1;
}

.preview-text {
  font-size: 14px;
  font-weight: 600;
  z-index: 1;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .modal-content {
    max-width: 95vw;
  }
  
  .form-layout {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  
  .form-section:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  .modal-content {
    max-width: 95vw;
    margin: 10px;
  }
  
  .form-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .icon-options {
    grid-template-columns: repeat(6, 1fr);
    max-height: 180px;
  }
  
  .icon-option {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }
  
  .current-icon {
    font-size: 24px;
    width: 44px;
    height: 44px;
  }
  
  .custom-input {
    font-size: 13px;
    padding: 6px 8px;
  }
  
  .btn-custom {
    padding: 6px 8px;
    font-size: 11px;
  }
}

.preview-icon {
  font-size: 24px;
  margin-bottom: 4px;
}

.preview-text {
  font-weight: bold;
  font-size: 14px;
}

/* 单选按钮组 */
.radio-group {
  display: flex;
  gap: 16px;
}

.radio-item {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.radio-item input[type="radio"] {
  width: 16px;
  height: 16px;
}

.radio-text {
  color: white;
  font-size: 14px;
}

/* 表单操作 */
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid #282828;
}

/* 加载状态 */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 999;
  color: white;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #282828;
  border-top: 4px solid #1DB954;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
  
  .icon-options {
    grid-template-columns: repeat(6, 1fr);
  }
  
  .batch-actions-inline {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-left: 0;
    padding-left: 0;
    border-left: none;
    border-top: 1px solid #404040;
    padding-top: 8px;
  }
}

@media (max-width: 768px) {
  .categories-container {
    padding: 16px;
  }
  
  .header {
    flex-direction: column;
    gap: 16px;
  }
  
  .filter-section {
    flex-direction: column;
    gap: 12px;
  }
  
  .filter-left, .filter-right {
    width: 100%;
  }
  
  .filter-left {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .batch-actions-inline {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
    border-top: 1px solid #404040;
    padding-top: 8px;
    width: 100%;
    justify-content: space-between;
  }
  
  .search-input {
    width: 100%;
  }
  
  .batch-actions {
    flex-direction: column;
    gap: 12px;
  }
  
  .categories-table {
    font-size: 12px;
  }
  
  .categories-table th,
  .categories-table td {
    padding: 8px 6px;
  }
  
  .icon-options {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .page-numbers {
    display: none;
  }
}
</style> 